﻿
import StartTutorialUI_Generate from "./ui-generate/NPCTalk/StartTutorialUI_generate";


export default class StartTutorialUI extends StartTutorialUI_Generate {
	// 首先将tween动画和button1的位置初始化
	private tween: Tween<Vector2> | null = null

	private originalPosition: Vector2

	// 待播放的文本数组
	private textToShow: string[] = [
        "您好，看来您是第一次游玩这款游戏呢。",
        "在教学完成后，您可以再来到我这里选择游玩其他模式。"
    ];

	// 计时器，当前文本索引，文本索引，是否处于播放状态
	private textTimer: number | null = null;
    private currentIndex: number = 0;
    private textIndex: number = 0;
    private isTextPlaying: boolean = false;
	/** 
	 * 构造UI文件成功后，在合适的时机最先初始化一次 
	 */
	protected onStart() {
		//设置能否每帧触发onUpdate
		this.canUpdate = false;
		this.layer = UILayerMiddle;

		// 在首次唤醒此UI时，先记录button1的位置，后续使用此位置在动画结束时重置按钮位置，此处使用.clone，因为不加clone是对此按钮位置的引用而不是赋值
		this.originalPosition = this.nextButton_1.position.clone()

		// Button2点击事件
		this.setButton2ClickListener();
    
	}
	



	/**
	 * 设置显示时触发
	 */
	protected onShow(...params: any[]) {
		// 每次UI显示时,触发动画
		this.UITweenStart(this.nextButton_1.position.x, this.nextButton_1.position.y + 30)
		this.playText();
	}

	/**
	 * 设置不显示时触发
	 */
	protected onHide() {
		// Ui隐藏时,如果动画在运行,停止动画
		if (this.tween) {
			this.tween.stop();
			this.tween = null; // 清空补间动画实例
		}
		 // 清除文本播放定时器
		 this.clearTextTimer();
		 // 重置文本播放状态和索引
		 this.isTextPlaying = false;
		 this.currentIndex = 0;
		 this.textIndex = 0;
		 // 清空文本显示
		 this.guideText1.text = "";
	}

	/**
	 * 开启一个移动UI的补间动画
	 * @param targetX 目标位置x
	 * @param targetY 目标位置y
	 */
	private UITweenStart(targetX: number, targetY: number) {
		let targetPosition = new Vector2(targetX, targetY)
		this.tween = new Tween(this.nextButton_1.position).to(targetPosition, 500).onUpdate((obj) => {
			// 每一次更新，改变位置
			this.nextButton_1.position = obj;
		})
		// 无限循环动画
		this.tween.start().repeat(Infinity).onStop(() => {
			// 在动画结束时重置按钮位置
			this.nextButton_1.position = this.originalPosition
		})
	}

	// Button2点击事件
 private setButton2ClickListener() {
        this.nextButton_2.onClicked.add(() => {
            this.onNextButtonClicked();
        });
    }

	private playText() {
        this.clearTextTimer();
        this.isTextPlaying = true;
        this.textIndex = 0;
        this.textTimer = setInterval(() => {
            if (this.textIndex <= this.textToShow[this.currentIndex].length) {
                this.guideText1.text = this.textToShow[this.currentIndex].slice(0, this.textIndex);
                this.textIndex++;
            } else {
                this.clearTextTimer();
                this.isTextPlaying = false;
            }
        }, 200);
    }

    private clearTextTimer() {
        if (this.textTimer) {
            clearInterval(this.textTimer);
            this.textTimer = null;
        }
    }

    private onNextButtonClicked() {
        if (this.isTextPlaying) {
            // 如果文本正在播放，立即显示完整的当前文本
            this.guideText1.text = this.textToShow[this.currentIndex];
            this.clearTextTimer();
            this.isTextPlaying = false;
        } else {
            // 如果文本已经播放完成，播放下一句文本或者执行其他操作
            this.currentIndex++;
            if (this.currentIndex < this.textToShow.length) {
                this.playText();
            } else {
                // 所有文本播放完成，执行其他操作
                this.handleAllTextsPlayed();
            }
        }
    }

    private handleAllTextsPlayed() {
        // 处理所有文本播放完成后的逻辑，目前是隐藏UI，后续应该改为跳转到教学模式
		UIService.hide(StartTutorialUI)
    }
}